<template>
  <!-- 兑换订单管理 -->
  <div class="conver">
    <hoseVue>
      <search :iptObj="iptObj" :optionArr="optionArr" :region="true" @onSubmit="Submit"></search>
      <Table @deleteRow1="details" :tableArr="tableArr" :operationObj="operationObj" :tableData="tableData">
      </Table>
      <PaginationVue @cChange="cc" :total="total" :size="size"></PaginationVue>

    </hoseVue>
  </div>
  <Mask ref="mask" title="订单详情" :type="wrap" :headright="false" @cancel="gb">
    <template #headright></template>
    <template #main  >
      <Table  :tableArr="Arr" :operationObj="Objs" :tableData="Data" v-if="flagd" >

      </Table>

    </template>
  </Mask>
</template>

<script setup>
import { ref, reactive } from "vue";
import hoseVue from "../../components/hose.vue";
import search from "../../components/Search.vue";
import Table from "../../components/Table.vue";
import Mask from "../../components/Mask.vue";
import { showPCOrderAll } from '../../api/index'
import { newTime } from '../../components/Method'
import PaginationVue from "../../components/Pagination.vue";


// import { useCounterStore } from "../../stores/counter";

// const stores = useCounterStore();

const size = ref(9)
const total = ref(0)
const wrap=ref('wrap')
const flagd=ref(false)

const mask = ref(null);

const Data=ref([
{商品编号:'LS12903881',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
{商品编号:'LS12903882',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
{商品编号:'LS12903883',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
{商品编号:'LS12903884',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
{商品编号:'LS12903885',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
// {商品编号:'LS12903886',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
// {商品编号:'LS12903887',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
// {商品编号:'LS12903888',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12},
// {商品编号:'LS12903889',商品名称:'创意卫浴五件套',规格:'蓝色款',数量:1,库存:12}

])

const Arr=reactive({商品编号:'商品编号',商品名称:'商品名称',规格:'规格',数量:'数量',库存:'库存'})

const tableArr = reactive({
  exorderid: '订单编号', shipping: '订单类型', time: '创建时间', time2: '预约时间', status: '当前状态'
})

const value=reactive({})

function Submit(val) {
  // console.log(val);

  // if (val.region==='全部') {
  //   const a=''
  // }else if (val.region==='送货订单') {

  // }
  value.value=val
  console.log(value.value);

  showPCOrderAll(1, 9, val.user, val.tel).then((res) => {
    console.log(res);
    arr.value = res.data.data.data
    total.value = res.data.data.totalCount

    // console.log(arr.value);
    tableData.value = []
    arr.value.forEach(item => {
      tableData.value.push({
        exorderid: item.exorderid,
        shipping: item.shipping,
        time: newTime('YYYY-MM-DD hh:mm:ss', item.time),
        time2: newTime('YYYY-MM-DD hh:mm:ss', item.time),
        status: item.status,
        type1: pd(item.status),
      })

    });
  })
}

const iptObj = reactive({
  title: "兑换订单管理",
  userBool: true,
  userTitle: "订单编号",
  userTel: "联系电话",
  userRegion: "当前状态",
  telrBool: false,
  regionBool: true,
  userText: "请输入订单编号",
  telText: "请输入联系电话",
  regionText: "请选择内容",
});

const Objs=reactive({
  operation1: "查看详情",
  operation2: "接单",
  title1: "操作", //操作标题
  text1: true, // true 为文字类型
  bool1: false, //操作是否显示
  bool2: false,
  row: false,
})

const operationObj = reactive({
  operation1: "查看详情",
  operation2: "接单",
  title1: "操作", //操作标题
  text1: true, // true 为文字类型
  bool1: true, //操作是否显示
  bool2: false,
  row: false,
});

// const tableData = ref([
//   {
//     订单编号: "H202212091111",
//     订单类型: "用户自取",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "待取货",
//     type1: "取货",
//   },

//   {
//     订单编号: "H202212091111",
//     订单类型: "送货上门",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "待送货",
//     type1: "安排送货",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "用户自取",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "送货上门",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "用户自取",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "待取货",
//     type1: "取货",
//   },

//   {
//     订单编号: "H202212091111",
//     订单类型: "送货上门",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "待送货",
//     type1: "安排送货",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "用户自取",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "送货上门",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "用户自取",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
//   {
//     订单编号: "H202212091111",
//     订单类型: "送货上门",
//     创建时间: "2022-12-9 12:24:24",
//     预约时间: "2022-12-9 01:22:11",
//     当前状态: "已完成",
//     type1: "查看详情",
//   },
// ]);

const tableData = ref([])

function pd(val) {
  if (val === '已完成') {
    return '查看详情'
  } else if (val === '待送货') {
    return '安排送货'

  } else if (val === '待取货') {
    return '取货'

  } else if (val === '配送中') {
    return '查看详情'

  }else if (val === '待支付') {
    return '查看详情'

  }
}

function cc(index) {
  showPCOrderAll(index,9,value.value.user).then((res) => {
    arr.value = res.data.data.data
    console.log(arr.value);
    tableData.value = []
  total.value = res.data.data.totalCount

    arr.value.forEach(item => {
      tableData.value.push({
        exorderid: item.exorderid,
        shipping: item.shipping,
        time: newTime('YYYY-MM-DD hh:mm:ss', item.time),
        time2: newTime('YYYY-MM-DD hh:mm:ss', item.time),
        status: item.status,
        type1: pd(item.status),
      })

    });


  })

}


const arr = ref([])

showPCOrderAll().then((res) => {
  arr.value = res.data.data.data
  // console.log(arr.value);
  total.value = res.data.data.totalCount
  arr.value.forEach(item => {
    tableData.value.push({
      exorderid: item.exorderid,
      shipping: item.shipping,
      time: newTime('YYYY-MM-DD hh:mm:ss', item.time),
      time2: newTime('YYYY-MM-DD hh:mm:ss', item.time),
      status: item.status,
      type1: pd(item.status),
    })

  });
})




const optionArr = ["全部", "送货订单", "收货订单", "充值订单"];


const obj = ref([
  "订单编号",
  "订单类型",
  "创建时间",
  "预约时间",
  "当前状态",
  '操作'
]);


function details(index) {
  // console.log(tableData.value[index].type1);

  if (tableData.value[index].type1 === '查看详情') {
    wrap.value='wrap'
    mask.value.open(tableData.value[index], obj.value);
    flagd.value=false
    
  }else if (tableData.value[index].type1 === '取货') {
    wrap.value=''
    mask.value.open();
    flagd.value=true
  }else if (tableData.value[index].type1 === '查看地址') {
    wrap.value='wrap'
    mask.value.open(tableData.value[index], obj.value);
    flagd.value=false
  }

}

function gb() {
  mask.value.Tube()
}
</script>

<style scoped>
.conver {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
